<template>
	<view>
		<view class="box">
			<view class="wire"></view>
			<view class="each z-flex-x-s-b">
				<view class="name">头像</view>
				<view class="each-r" @click="changeUserHeader"><image :src="$oss(avatar)" mode="aspectFill"></image></view>
			</view>
			<view class="wire"></view>
			<view class="each z-flex-x-s-b">
				<view class="name">姓名</view>
				<view class="each-r">
					<input type="text" v-model="nickname" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="each z-flex-x-s-b">
				<view class="name">手机号</view>
				<view class="each-r">
					<input type="number" v-model="mobile" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
		</view>
		
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="amend">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatar:'',
			nickname:'',
			mobile:''
		};
	},
	onLoad() {
		this.getInfo()
	},
	methods: {
		amend(){
			this.$api.post('/profile',{
				avatar:this.avatar,
				nickname:this.nickname,
				mobile:this.mobile
			}).then((res) => {
				if(res.code == 1){
					this.$toast(res.msg)
				}
			}).catch((res) => {});
		},
		getInfo() {
			this.$api.post('/getUserInfo').then((res) => {
				if(res.data){
					this.avatar = res.data.avatar
					this.nickname = res.data.nickname
					this.mobile = res.data.mobile
				}
			}).catch((res) => {});
		},
		changeUserHeader() {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.$uploadUrl,
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							token: uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							this.avatar = this.$oss(JSON.parse(uploadFileRes.data).data.url);
							// uni.hideLoading();
						},
						fail:(err) => {
							// uni.hideLoading();
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.box {
	padding: 0 32rpx;
	.each {
		height: 107rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #1c274c;
		.name {
		}
		.each-r {
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			input {
				text-align: right;
			}
		}
	}

	.wire {
		width: 686rpx;
		height: 1rpx;
		background-color: #f2f3f5;
	}
}


.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #4BC264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
